import React from 'react'
import { Select, Form, Button, Input, DatePicker } from 'antd'
import Utils from '../../utils/utils';
const FormItem = Form.Item;

class FilterForm extends React.Component{

    /**
     * 判断选择表单
     */
    initFormList = () => {
        const { getFieldDecorator } = this.props.form;
        const formList = this.props.formList;
        const formItemList = [];
        if (formList && formList.length>0){
            formList.forEach((item) => {
                let label = item.label
                let field = item.field
                let initialValue = item.initialValue || ''
                let placeholder = item.placeholder
                let width = item.ietm
                switch(item.type) {
                    case 'SELECT': // 下拉框
                        const SELECT = <FormItem label={label} key={field}>
                            {
                                getFieldDecorator(field, {
                                    initialValue: initialValue
                                })(
                                    <Select
                                        style={{ width: width }}
                                        placeholder={placeholder}
                                    >
                                        {Utils.getOptionList(item.list)}
                                    </Select>
                                )
                            }
                        </FormItem>;
                        formItemList.push(SELECT) 
                        break;

                    case 'INPUT': // 输入框
                        const INPUT = <FormItem label={label} key={field}>
                            {
                                getFieldDecorator(field)(
                                    <Input
                                        style={{ width:width }}
                                        placeholder={placeholder}
                                    />
                                )
                            }
                        </FormItem>
                        formItemList.push(INPUT)
                        break;

                    case 'RangePicker': // 日期范围 （开始时间 - 结束时间）
                        const begin_time = <FormItem label={label} key={field[0]}>
                            {
                                getFieldDecorator(field[0])(
                                    <DatePicker showTime={true} placeholder={placeholder} format={item.format}/>
                                )
                            }
                        </FormItem>;
                        formItemList.push(begin_time)
                        const end_time = <FormItem label="~" colon={false} key={field[1]}>
                            {
                                getFieldDecorator(field[1])(
                                    <DatePicker showTime={true} placeholder={placeholder} format={item.format} />
                                )
                            }
                        </FormItem>;
                        formItemList.push(end_time)
                        break;
                    
                    case 'date': // 单个日期框
                        const date = <FormItem label={label} key={field}>
                            {
                                getFieldDecorator(field)(
                                    <DatePicker showTime={true} placeholder={placeholder} format={item.format} />
                                )
                            }
                        </FormItem>
                        formItemList.push(date)
                        break;

                        default:
                        return
                }
            })
        }
        return formItemList
 
    }

    // 点击查询，获取过滤条件
    handleFilterSubmit = () => {
        let formValue = this.props.form.getFieldsValue()
        // 绑定父级点击事件，并将筛选表单数据回传给父组件
        this.props.filterSubmit(formValue)
        
    }

    render() {
        return (
            <Form layout="inline">
                { this.initFormList() }
                <FormItem>
                    <Button type="primary" style={{ margin: '0 20px' }} onClick={this.handleFilterSubmit}>查询</Button>
                </FormItem>
            </Form>
        )
    }
}
export default Form.create({})(FilterForm);